import React, { useState, useEffect } from 'react'
import { Text, View } from '@tarojs/components'
import { Space } from '@/components/UiComponents'
import { AtTag } from 'taro-ui'
import "taro-ui/dist/style/components/tag.scss";
const index = (props) => {
    const { data = {}, index, ChangeValue } = props
    const {
        title,
        label,
        require = false,
        desc,
        value = '',
        rule = 'order',
        orderValue = '',
        reverseValue = '',
        scaleNum = 5,
        option = []
    } = data
    const renderScaleNum = () => {

        return <Space wrap={true} size={'large'}>
            {option.map((item, o) => {
                if (item == value) {
                    return <AtTag style={{ fontSize: 28, padding: "6px 12px" }} onClick={() => {
                        ChangeValue({ index, value: { value: '' } })

                    }} active={true} type='primary'>{item} </AtTag>
                }
                return <AtTag style={{ fontSize: 24 }} onClick={() => {
                    ChangeValue({ index, value: { value: item } })

                }} fill='outline'>{item} </AtTag>

            })}
        </Space>
    }
    return <View className='CollectWps_box_content'>
        <View className='CollectWps_label'>{require && <Text style={{ color: "red", right: 4 }}>*</Text>}{label}</View>
        <View className='CollectWps_desc'>{desc}</View>
        <View style={{ display: 'flex', justifyContent: 'space-between', alignItems: "center" }}>
            <View>{rule === 'order' ? orderValue : reverseValue} </View>
            <View>{rule === 'reverse' ? orderValue : reverseValue} </View>

        </View>
        <Space style={{ marginTop: 12 }}>
            {renderScaleNum()}
        </Space>
    </View>
}
export default index